<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name = "format-detection" content = "telephone=no"/>
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
        <title>Quizz Poker</title>
        <link type="text/css" rel="stylesheet" href="media/css/mycustomtheme.min.css" />
        <link rel="stylesheet" href="media/css/jquery.mobile.structure-1.1.1.min.css" />
        <link type="text/css" rel="stylesheet" href="media/css/pokerQuizz.css" />
	    </style>
    <!--  Javascript Libraries -->
    <script type="text/javascript" src="media/js/jquery.min.js" ></script>
    <script type="text/javascript" src="media/js/jquery.mobile-1.1.0.min.js" ></script>
    </head>
    <body>
        <div data-role="page" id="homePage" data-theme="n" class="page" style="height:100% !important;">
            <div data-role="header" data-theme="n">
                <h1>Poker Quizz Home</h1>
            </div>
            <div data-role="content" class='content'>
                <a href="#routeurQuizz" id="" data-transition="slide">
                  <div class="listQuizz">
                  </div>
                </a>
                <a href="oddsList" id="" data-transition="slide">
                  <div class="probaGeneration">
                  </div>
                </a>  
            </div>
            <div data-role="footer" data-position="fixed" data-theme="n">
            </div>    
        </div>
    
        <div data-role="page" id="routeurQuizz" data-theme="n" class="page">
            <div data-role="header" data-theme="n">
                <h1>Liste des Quizz </h1>
            </div>
            <div data-role="content" >
                <br/><br/>
                <div data-role='fieldcontain'>
                    <fieldset id="categoriesWrapper" data-role='controlgroup' style="margin: 10px;"> 
                        
                    </fieldset>        
                </div>
                
            </div>
            <div data-role="footer" data-position="fixed" data-theme="n">
            </div>    
        </div>
        
        <div data-role="page" id="pageModel" class="pageModel" data-theme="o">
            <div data-role="header" data-theme="n" >
                <h1 id="quizzName">Quizz Cult G</h1>
            </div>
            <div data-role="content" >
                <h2 id="questionTitle">
                    Title of the question
                </h2>
                
                <div id="questionsBlock">
                </div>
                <div id="validateButtonWrapper">
                    <button id="ValidateButton" onClick="validateQuestion()" data-theme="p">
                        Validez
                    </button>
                </div>
                <a href="#nextQuestion" id="nextQuestionLink" data-transition="slide">
                    <button id="nextQuestion" data-theme="p">
                        Prochaine Question
                    </button>
                </a>
                <span style="display:none;color:green;" id="positiveReply">Bonne réponse</span>
                <span style="display:none;color:red;" id="negativeReply">Mauvaise réponse</span>
                <div class="explanation"></div>
               <h3>
                Score : 
                <span class="currentScore">4
                </span> / 
                <span class="questionsAnswered">5</span>
                (<span class="totalQuestions">5</span> questions en tout)
                </span>
              </h3>
            </div>
            <div data-role="footer" data-position="fixed" data-theme="e">
                
            </div>
        </div>
        
        <div data-role="page" id="optionsPage" data-theme="o"  data-add-back-btn="true">
            <div data-role="header"  data-position="fixed" data-theme="n" data-add-back-btn="true">
                <h1 id="quizzName">Optionss</h1>
            </div>
            <div data-role="content">
                <br/><br/><br/><br/><br/><br/>  
                <button onClick="resetScores();" data-theme="p"> Reset Scores </button>
                <br/><br/><br/>
                <button onClick="updateQuestions();" data-theme="p"> MAJ questions depuis Internet </button>
            </div>
            <div data-role="footer" data-position="fixed" id="footer" data-theme="n">
            </div>
        </div>
            
            <div id="footerTemplate" style="display:none;" >
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li><a data-icon="home" id='home' href="#homePage">Accueil</a></li>
                        <li><a data-icon="home" id='leaderboard' onClick="goToLeadeboard()" data-rel='external'>Classement</a></li>
                        <li><a data-icon="gear" id='options' href="#optionsPage" data-transition="pop">Options</a></li>
                    </ul>
                </div>
            </div>
            <script type="text/javascript" src="media/js/quizzQuestion.js" ></script>
            <script type="text/javascript" src="media/js/quizz.js" ></script>
            <script type="text/javascript" src="media/js/pokeralgo.js" ></script>
            <script type="text/javascript" src="media/js/cardranks.js" ></script>
            <script type="text/javascript" src="media/js/test.js" ></script>
        <script type="text/javascript" src="cordova-2.0.0.js"></script>

    </body>
</html>
